<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>

</head>
<body>
<div id="app">


  <!--搜索表单-->
  <el-form :inline="true" :model="user" class="demo-form-inline">

    <el-form-item label="用户名">
      <el-input v-model="user.username" placeholder="用户名"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-form-item>

    </el-form-item>

  </el-form>


  <!--按钮-->

  <el-row>

    <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
    <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>

  </el-row>
  <!--添加数据对话框表单-->
  <el-dialog
          title="编辑用户"
          :visible.sync="dialogVisible"
          width="30%"
  >

    <el-form ref="form" :model="user" label-width="80px">
      <el-form-item label="用户名称">
        <el-input v-model="user.username"></el-input>
      </el-form-item>

      <el-form-item label="用户密码">
        <el-input v-model="user.password"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="addUser">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>


  <!--表格-->
  <template>
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange">
      <el-table-column
              type="selection"
              width="55">
      </el-table-column>
      <el-table-column
              type="index"
              width="50">
      </el-table-column>

      <el-table-column
              prop="id"
              label="用户ID"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="username"
              label="用户名称"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="password"
              align="center"
              label="用户密码">
      </el-table-column>

      <el-table-column
              align="center"
              label="操作">

        <template slot-scope="scope">
          <el-row>
            <el-button type="primary" @click="updateButton(scope.row)">修改</el-button>
            <el-button type="danger" @click="deleteById(scope.row)">删除</el-button>
          </el-row>
        </template>

      </el-table-column>

    </el-table>
  </template>

  <el-dialog
          title="修改用户"
          :visible.sync="dialogVisible2"
          width="30%"
  >

    <el-form ref="form" :model="fix" label-width="80px">
      <el-form-item label="用户名称">
        <el-input v-model="fix.username"></el-input>
      </el-form-item>

      <el-form-item label="用户密码">
        <el-input v-model="fix.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="updateUser">提交</el-button>
        <el-button @click="dialogVisible2 = false">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>

  <!--分页工具条-->
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
  </el-pagination>

</div>

  <!-- 1. Vue 2 稳定版 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 2. ElementUI 稳定版 (CSS + JS) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js"></script>
    <!-- 3. Axios 稳定版 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>

    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

<script>

  new Vue({
    el: "#app",

    mounted(){
      //当页面加载完成后，发送异步请求，获取数据
      this.selectAll();

    },

    methods: {

      handleSelect(key, keyPath) {
        const _this = this;
        console.log(key, keyPath);
        if (key==2){
          _this.$router.push('/stock');
        }

      },

      deleteById(row){
        this.id=row.id;
        console.log(this.id);
        var _this=this;

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          axios({
            method:"get",
            url:"http://127.0.0.1:8080/deleteById?id="+this.id
          }).then(function (resp) {
            if(resp.data=="success"){
              _this.selectAll();
              _this.$message({
                message: '恭喜你，删除成功',
                type: 'success'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      updateUser(){

        var _this=this;
        axios({
          method:"post",
          url:"http://127.0.0.1:8080/update?id="+this.id,
          data:_this.fix
        }).then(function (resp) {
          if(resp.data=="success"){
            _this.dialogVisible2=false;
            _this.selectAll();
            _this.$message({
              message: '恭喜你，修改成功',
              type: 'success'
            });
          }
        })
      },

      getData(id){
        //发送axios请求
        var _this=this;
        axios({
          method:"get",
          url:"http://127.0.0.1:8080/findName?id="+id
        }).then(function (resp){
          //打开弹窗
          _this.dialogVisible2 = true;
          //获取数据
          console.log(resp.data);
          _this.fix=resp.data;
        })
      },
      updateButton(row){
        //获取id
        this.id=row.id;
        print(this.id)
        //发送请求
        this.getData(this.id);
      },

      // 查询分页数据
      selectAll(){

        axios({
          method:"post",
          url:"http://127.0.0.1:8080/find?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
          data:this.user
        }).then(resp =>{
          //设置表格数据
          this.tableData = resp.data.rows; // {rows:[],totalCount:100}
          //设置总记录数
          this.totalCount = resp.data.totalCount;
        })
      },

<!--        selectAll(){-->

<!--        axios({-->
<!--          method:"get",-->
<!--          url: "http://127.0.0.1:8080/get_users"-->
<!--        }).then(resp =>{-->
<!--          //设置表格数据-->
<!--          print(resp.data);-->
<!--          this.tableData = resp.data // {rows:[],totalCount:100}-->
<!--        })-->
<!--      },-->

      selectLike(){

        axios({
          method:"post",
          url: "http://127.0.0.1:8080/find?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
          data : {username : this.user.username}
        }).then(resp =>{
          //设置表格数据
          print(resp.data);
          this.tableData = resp.data.rows;
          this.totalCount = resp.data.totalCount;
        })
      },


      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      // 复选框选中后执行的方法
      handleSelectionChange(val) {
        this.multipleSelection = val;

         console.log(this.multipleSelection)
      },
      // 查询方法
      onSubmit() {
        console.log(this.user);
        this.selectAll();

      },
      // 添加数据
      addUser() {
        console.log(this.user);
        var _this = this;

        // 发送ajax请求，添加数据
        axios({
          method:"post",
          url:"http://127.0.0.1:8080/add",
          data:_this.user
        }).then(function (resp) {
          if(resp.data == "success"){
            //添加成功

            //关闭窗口
            _this.dialogVisible = false;

            // 重新查询数据
            _this.selectAll();
            // 弹出消息提示
            _this.$message({
              message: '恭喜你，添加成功',
              type: 'success'
            });

          }
        })


      },

      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        // 重新设置每页显示的条数
        this.pageSize  = val;
        this.selectAll();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        // 重新设置当前页码
        this.currentPage  = val;
        this.selectAll();
      },

      // 批量删除
      deleteByIds(){

        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //用户点击确认按钮

          //1. 创建id数组 [1,2,3], 从 this.multipleSelection 获取即可
          for (let i = 0; i < this.multipleSelection.length; i++) {
            let selectionElement = this.multipleSelection[i];
            this.selectedIds[i] = selectionElement.id;

          }

          //2. 发送AJAX请求
          var _this = this;

          // 发送ajax请求，添加数据
          axios({
            method:"post",
            url:"http://127.0.0.1:8080/deletemany",
            data:_this.selectedIds
          }).then(function (resp) {
            if(resp.data == "success"){
              //删除成功

              // 重新查询数据
              _this.selectAll();
              // 弹出消息提示
              _this.$message({
                message: '恭喜你，删除成功',
                type: 'success'
              });

            }
          })
        }).catch(() => {
          //用户点击取消按钮

          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      }

    },
    data() {
      return {
        currentRoute: window.location.pathname,
        activeIndex: '1',
        dialogVisible2:false,
        id:"",
        // 每页显示的条数
        pageSize:5,
        // 总记录数
        totalCount:100,
        // 当前页码
        currentPage: 1,
        // 添加数据对话框是否展示的标记
        dialogVisible: false,

        // 品牌模型数据
        user: {
          id:"",
          password:"",
          username:""
        },
        fix: {
          id:"",
          password:"",
          username:""
        },
        // 被选中的id数组
        selectedIds:[],
        // 复选框选中数据集合
        multipleSelection: [],
        // 表格数据
        tableData: [{
          id :"1",
          username:"zhangsan",
          password:"123456"
        }, {
          id :"1",
          username:"zhangsan",
          password:"123456"
        }, {
          id :"1",
          username:"zhangsan",
          password:"123456"
        }, {
          id :"1",
          username:"zhangsan",
          password:"123456"
        }]
      }
    }
  })
    Vue.use(ElementUi)
</script>

</body>
</html>